class LoadingCanvas {
    constructor() {
        this.color = "rgb(255,255,255,0.9)";
        this.ctx = null;
        this.degress = 1;
        this.vel = 255;
        this.start = 10;
        this.end = 10;
        this.width = 80;
        this.height = 80;
        this.radius = 10;
        if (!this.ctx) {
            this.create();
        }
    }

    /**
     * 创建画布
     */
    create() {
        this.canvas = document.createElement("canvas");
        this.canvasId = (new Date().getTime() * Math.random() + "").split(".").join("-canvas-")
        this.canvas.setAttribute("id", this.canvasId);
        this.canvas.setAttribute("width", this.width);
        this.canvas.setAttribute("height", this.height);
        this.canvas.setAttribute("background", "#ffffff");
        document.querySelector("body").appendChild(this.canvas);
        this.ctx = document.getElementById(this.canvasId).getContext("2d");
    }

    /**
     * 画画
     */
    draw() {
        if (!this.ctx) {
            this.create();
        }
        this.ctx.translate(this.width / 2, this.height / 2);//将圆心移动到canvas的中心
        this.loading(this.vel);
    }

    /**
     * 设置颜色
     * @param color
     */
    getColor(color) {
        this.color = 'rgba(' + 255 + ',' + color + ',' + 255 + ',0.9)';
        return this.color
    }

    /**
     * 设置角度
     * @param value
     */
    getDeg(value) {
        return value * Math.PI / 180;
    }

    /**
     * 循环
     * @param value
     */
    loading(value = 255) {
        this.time = value;
        value == this.vel ? this.isAdd = true : "";
        var a = Math.abs(this.time) % this.vel;
        this.isAdd ? this.time-- : this.time++;
        if (a != 0) {
            this.ctx.fillStyle = this.getColor(a);
            this.ctx.beginPath();
            this.ctx.moveTo(this.start, this.end);
            this.ctx.lineTo(this.start + this.radius, this.end);
            this.ctx.lineTo(this.start + this.radius, this.end + this.radius);
            this.ctx.lineTo(this.start, this.end);
            this.ctx.fill();
            //这个加可以改变弧度
            // this.start = this.start>10?this.start-0.1:this.start+0.1;
            // this.end = this.end>10?this.end-0.1017:this.end+0.1017;
            this.ctx.rotate(this.getDeg(this.degress));
        }
        var _this = this;
        setTimeout(function () {
            _this.loading(_this.time);
            if (_this.time <= 0) {
                _this.isAdd = false;
            } else if (_this.time >= this.vel) {
                _this.isAdd = true;
            }
        }, 0);
    }


    setValue(key, value) {
        this[key] = value
    }
    getKeyValue(){
        return this[key];
    }

    /**
     * 设置画布要的属性，如类名或者绑定需要的数据
     * @param key
     * @param value
     */
    setAttr(key, value) {
        document.getElementById(this.canvasId).setAttribute(key, value)
    }

    /**
     * 删除
     */
    hideLoading() {
        document.getElementById(this.canvasId).remove()
    }

    /**
     * 展示
     */
    showLoading() {
        this.draw()
    }
}
